<template>
    <div :class="className" :style="{height:hght,width:wid}" />
</template>

<script>

import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
// import resize from './mixins/resize'

import global from '@/global';

export default {
    name: 'CompassBoard',
    props: {
        className: {
            type: String,
            default: 'compass'
        },
        wid: {
            type: String,
            default: '100%'
        },
        hght: {
            type: String,
            default: '400px'
        },
        autoResize: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            yieldRate: [],
            echartsOption: {
                // title: {
                // text: '功能名称，可添加该区块功能名，此处不需要'
                // },
                tooltip: {
                    formatter: "{a}X轴 <br/>{b} : {c}"
                },
                series: [
                    {
                        title: { // title未设置，参数无用，需要显示title时修改以下参数
                            textStyle: {
                                fontWeight: 'bolder',
                                fontSize: 15,
                                fontStyle: 'italic',
                                color:"white"
                            }
                        },
                        name: '罗盘',
                        type: 'gauge', // 图片类型是仪表盘，修改可设置为柱状图等
                        min: -180,   // 罗盘最小值
                        max: 180,  // 罗盘最大值
                        startAngle: -90, //start angle和end angle用于使罗盘变为一个圆而非扇形
                        endAngle: 270,
                        clockwise: true, // 顺时针旋转
                        precision: 0,  // 小数精度，默认为0，无小数点
                        detail: {
                            formatter: '{value}', // 这里如果需要加上单位，写'{value}单位'即可
                            fontSize: 15,// 文字的字体大小,默认 15。
                            offsetCenter: [0,"60%"],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                            color : "white" //设置字体颜色
                        },
                        data:  [
                            {
                                value: 0 // 初始的value
                            }
                        ],
                        pointer : { // 指针的设置，这里设置为了图片的base64格式。注意图片不能太大，不然String数组越界了会图片错误
                            icon : "image://data:image/jpg;base64," + global.filePathX, //这里获取的global中的filepath的值
                            width : "100px", // 设置宽度以保证图片大小正常，不然会被压扁/拉长
                            offsetCenter: [0, '30%'], // 偏离中心位置，用于调整图片至中心位置
                        },
                        axisTick:false, //是否显示刻度
                        splitLine:{
                            show:false,//是否显示分隔线。
                        },
                        axisLabel: {
                            show: false // 是否显示刻度上的数字
                        },
                        axisLine: {
                            lineStyle: {
                                color : [[1, 'black']], // 最外圈的圆的颜色,在此处用作背景色
                                // color : [[1, '#878b92']], // 最外圈的圆的颜色,原先的背景色
                                width: 100, // 最外圈的圆的宽度
                                opacity: 0.5
                            }
                        }
                    }
                ]
            }
        }
    },
    created () {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.compass) {
            return
        }
        this.compass.dispose()
        this.compass = null
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.compass = echarts.init(this.$el)
        //绘制图表，option是图表数据
        this.compass.setOption(this.echartsOption)
        setInterval(this.addData, 3000);
    },
    methods: {
        initChart () {
            // 基于准备好的dom，初始化echarts实例
            this.compass = echarts.init(this.$el)
            //绘制图表，option是图表数据
            this.compass.setOption(this.echartsOption)
        },
        addData : function() {
            this.$axios.get(this.GLOBAL.serverIp + '/api/compassBoardX/').then((res) => {
                this.yieldRate = (res.data.data * 1).toFixed(3)
                this.echartsOption.series[0].data[0].value = this.yieldRate
                // console.log(this.echartsOption.series[0].data)
                this.compass.setOption(this.echartsOption)
            })
        }
    }
};
</script>

<style scoped>

</style>
